<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { leftCenter} from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});
const data = ref({})
const getData = () => {
  leftCenter().then((res) => {
      console.log(res,"res")
      data.value = {
        category: res.map(item => item.pe),
        val1: res.map(item => item.total),
        val2: res.map(item => item.lasttotal)
      };
      console.log(data,"data")
      setOption(data.value)
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const setOption = async (newData: any) => {
  //newData.category[0] = '安全监管业务序列'
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    // legend: {
    //   // data: ["签收工单数", "处理工单数"],
    //   itemWidth: 16,
    //   itemHeight: 8,
    //   textStyle: {
    //     color: "white",
    //     fontSize: 8,
    //   },
    //   // top: "0",
    // },
    grid: {
      left: 25,
      right: 16,
      // bottom: 36,
      top: 32,
    },
    xAxis: {
      data: newData.category,
      axisLine: {
        lineStyle: {
          color: "#7184a3",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
            // rotate:-70,
            interval: 0,
            color: "#FFFFFF",

            formatter: function(value) {
      //当字符长度超过4时换行显示
              value=value.replace('业务','').replace('序列','');
      if (value.length > 1) {
        // 将字符串每4个字符分割一次
        let result = [];
        for (let i = 0; i < value.length; i += 1) {
          result.push(value.substr(i, 1));
        }
        return result.join('\n');
      }
      return value.replace('业务','').replace('序列','');
    },
          },
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#7184a3",
          },
        },
        axisLabel: {
          // formatter: "{value}",
          color: "#D7D7D7",
        },
      },
    ],
    series: [
      {
        name: "调度控制业务序列",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4375AE" },
            { offset: 1, color: "rgba(67,117,174,0)" },
          ]),
        },
        label: {
          normal: {
            show: true,
            position: "top",
            color: "#D7D7D7",
            fontSize: "9",
            distance: 6,
          },
        },
        data: newData.val1,
      },
      {
        name: "技术专家同比",
        type: "line",
        barWidth: 10,
        itemStyle: {
          // borderRadius: 5,
          color: "#7CBBCD",
        },
        label: {
          normal: {
            show: true,
            position: "top",
            color: "#D7D7D7",
            fontSize: "9",
            distance: 6,
          },
        },
        // z: -12,
        data: newData.val2,
      },
    ],
    dataZoom: [
      {
        show: newData.category.length > 20,
        type: "slider",
        xAxisIndex: 0,
        zoomLock: true,
        // width: 7,
        height: 7,
        bottom: 8,
        // right: 12,
        borderWidth: 0,
        borderColor: "transparent",
        backgroundColor: "rgba(4,42,102,0.7)",
        fillerColor: "white",
        borderRadius: 10,
        handleSize: 0,
        showDetail: false,
        start: 0,
        end: newData.category.length > 20 ? 50 : 100,
        brushSelect: false,
        filterMode: "filter",
        showDataShadow: false,
        realtime: true,
        textStyle: {
          color: "transparent",
        },
      },
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<style scoped lang="scss"></style>
